<template>
<div style="background-color: #f6f6f6;height: 700px">
  <nav class="top">
    <ul v-if="!$store.state.isLogin">
      <router-link to="/collect" tag="li">收藏  <van-icon name="star-o" color="#ee0a24"/></router-link>
      <router-link to="/epidemic" tag="li">疫情  <van-icon name="shield-o" color="#ee0a24"/></router-link>
      <router-link to="/subscription" tag="li">订阅  <van-icon name="bulb-o" color="#ee0a24" size="25" /></router-link>
    </ul>
    <ul v-else>
      <li @click="goLogin">收藏  <van-icon name="star-o" color="#ee0a24"/></li>
      <router-link to="/epidemic" tag="li">疫情  <van-icon name="shield-o" color="#ee0a24"/></router-link>
      <li @click="goLogin">订阅  <van-icon name="bulb-o" color="#ee0a24"/></li>
    </ul>
  </nav>
  <div class="content">
    <router-link to="/wallpaper" tag="p" @click="cue">随机壁纸<span><van-icon name="arrow" /></span></router-link>
  </div>
  <div class="content">
    <router-link to="/constellation" tag="p" @click="cue">今日星座运势<span><van-icon name="arrow" /></span></router-link>
<!--    <p @click="cue">京东特供 <span><van-icon name="arrow" /></span></p>-->
  </div>
  <div class="content">
    <router-link to="/Search" tag="p" @click="cue">随心听<span><van-icon name="arrow" /></span></router-link>
    <router-link to="/puzzle" tag="p" @click="cue">拼图游戏<span><van-icon name="arrow" /></span></router-link>
    <p @click="cue">系统设置 <span><van-icon name="arrow" /></span></p>
  </div>
</div>
</template>

<script>
import { Toast } from 'vant';
export default {
name: "MySelfBody.vue",

  data() {
    return {
    }
  },
  methods:{
    cue() {
      Toast('钱不够，组件没写，功能暂无，敬请期待')
    },
    goLogin() {
      Toast('请先登录')
    }
  },
}
</script>

<style scoped lang="less">
@bgColor : red
* {
  margin: 0;
  padding: 0;
}
//顶部收藏
.top {
  margin-bottom: 20px;
  width: 100%;
  height: 69px;
  line-height: 69px;
  background-color: white;
  >ul {
    width: 100%;
    display: flex;
    list-style: none;
    >li {
      text-align: center;
      width: 33%;
      font-size: 20px;
    }
  }
}
//  主体内容
.content {
  margin: 20px 0;
  background-color: white;
  width: 100%;
  >p {
    margin: auto;
    width: 88%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    >span {
      float: right;
    }
  }
  >p:last-child {
    border: 0;
  }
}
</style>